<template>
  <div class="destination-page">
    <h1>目的地</h1>
    
    <!-- 添加搜索框 -->
    <div class="search-box">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索目的地..."
        class="search-input"
        clearable
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </div>

    <!-- 搜索结果提示 -->
    <div v-if="isSearchResult" class="search-result-tip">
      <span>搜索"{{ searchKeyword }}"的结果 ({{ destinations.length }})</span>
      <el-button text @click="clearSearch">清除搜索</el-button>
    </div>

    <div class="destination-grid">
      <div v-for="dest in destinations" :key="dest.id" class="destination-card" @click="goToDetail(dest.id)">
        <img :src="dest.imageUrl" :alt="dest.name">
        <div class="destination-info">
          <h3>{{ dest.name }}</h3>
          <p class="city">{{ dest.city }}</p>
          <p class="description">{{ dest.description }}</p>
          <div class="rating-info">
            <el-rate
              v-model="dest.averageRating"
              disabled
              show-score
              text-color="#ff9900"
            />
            <span class="comment-count">{{ dest.commentCount }}条评论</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDestination } from '@/ts/pages/destination'
import '@/css/pages/destination.css'
import { Search } from '@element-plus/icons-vue'
import type { Router } from 'vue-router'
import { useRouter } from 'vue-router'

const router = useRouter()
const { 
  destinations, 
  searchKeyword, 
  isSearchResult,
  handleSearch, 
  clearSearch,
  goToDetail 
} = useDestination()
</script> 